<template>
	<div class="container">
		<el-button type="primary" style="margin-bottom: 10px" @click="edit"
			>新增类型</el-button
		>
		<el-table :data="data" border style="width: 100%" locale="zhCn">
			<el-table-column type="index" label="序号" width="180" />
			<el-table-column prop="name" label="类型名" />
			<el-table-column label="操作" width="200">
				<template #default="scope">
					<el-button
						type="primary"
						@click="edit($event, scope.row.name, scope.row.id)"
						>编辑</el-button
					>
					<el-button type="danger" @click="handleDelete($event, scope.row.id)"
						>删除</el-button
					>
				</template>
			</el-table-column>
		</el-table>
		<el-dialog
			v-model="dialogVisible"
			:title="selectId == 0 ? '新增类型' : '修改类型'"
			:width="'30%'"
		>
			<el-input v-model="typeName" placeholder="请输入类型名"></el-input>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="dialogVisible = false">取消</el-button>
					<el-button type="primary" @click="submit">确认</el-button>
				</span>
			</template>
		</el-dialog>
		<el-dialog v-model="dialogVisible2" title="删除类型" :width="'30%'">
			<p style="font-size: 22px; text-indent: 2em">
				删除后所有引用该文章类型的都会被设置为未分类，确认删除？
			</p>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="dialogVisible2 = false">取消</el-button>
					<el-button type="danger" @click="delSubmit">确认</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>
<script setup>
import {
	ElTable,
	ElTableColumn,
	ElButton,
	ElDialog,
	ElInput,
	ElMessage,
} from "element-plus";
import "element-plus/es/components/table/style/css";
import "element-plus/es/components/table-column/style/css";
import "element-plus/es/components/button/style/css";
import "element-plus/es/components/input/style/css";
import "element-plus/es/components/dialog/style/css";
import {
	GetArticleType,
	EditArticleType,
	DeleteArticleType,
} from "@/api/request";
import { ref } from "vue";
const data = ref([]);
const dialogVisible = ref(false);
const typeName = ref("");
const selectId = ref(0);
GetArticleType().then((res) => {
	if (res.success) {
		data.value = res.data;
	} else {
		ElMessage.error(res.msg);
	}
});
const handleDelete = (e, id) => {
	dialogVisible2.value = true;
	selectId.value = id;
};
const dialogVisible2 = ref(false);
const delSubmit = () => {
	DeleteArticleType(selectId.value).then((res) => {
		if (res.success) {
			ElMessage.success("删除成功");
			dialogVisible2.value = false;
			GetArticleType().then((res) => {
				if (res.success) {
					data.value = res.data;
				} else {
					ElMessage.error(res.msg);
				}
			});
		} else {
			ElMessage.error(res.msg);
		}
	});
};

const edit = (event, name = "", id) => {
	typeName.value = name;
	dialogVisible.value = true;
	selectId.value = id || 0;
};
const submit = () => {
	if (typeName.value.trim() == "") {
		ElMessage.error("类型名不能为空");
		return;
	}
	// 检查类型名是否包含特殊字符或者空格
	if (
		/[`~!@#$^&*()=|{}':;',\s\[\].<>/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？]/.test(
			typeName.value
		)
	) {
		ElMessage.error("类型名不能包含特殊字符");
		return;
	}
	// 检查类型名是否已经存在
	const isExist = data.value.some(
		(item) => item.name.toLowerCase() == typeName.value.toLowerCase()
	);

	if (typeName.value.trim().length > 30) {
		ElMessage.error("类型名不能超过30个字符");
		return;
	}
	if (isExist) {
		ElMessage.error("类型名已经存在");
		return;
	}
	EditArticleType({
		name: typeName.value,
		id: selectId.value,
	}).then((res) => {
		if (res.success) {
			ElMessage.success("操作成功");
			dialogVisible.value = false;
			GetArticleType().then((res) => {
				if (res.success) {
					data.value = res.data;
				} else {
					ElMessage.error(res.msg);
				}
			});
		}
	});
};
</script>
